<!-- 
  路由有两种参数:
    - query: ?a=xx&b=xx
    - params: /:a/:b    /a-value/b-value
      - 1. 路由规则添加占位符, 占位时使用的名称, 对应 params 内字段的名称.
      - 2. RouteLink 的 to 如果使用对象写法, 不能用 path, 只能用 name
      - 3. 传递的参数不能是对象和数组
      - 4. 占位符使用 ？ 表示可选参数, 配置参数的必要性
    备注:
      1. 传递 params 参数时, 若使用 to 的对象写法, 必须使用 name 配置, 不能用 path.
      2. 传递 params 参数时, 需要提前在规则中占位.
--> 
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种, 纯字符串写法 -->
        <!-- <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{ news.title }}</RouterLink> -->
        
        <!-- 第二种写法 -->
        <RouterLink :to="{
          name: 'xiang',
          // params: {
          //   id: news.id,
          //   title: news.title,
          //   content: news.content
          // }
          query: {
            id: news.id,
            title: news.title,
            content: news.content
          }
        }">{{ news.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue'
import { RouterView, RouterLink } from 'vue-router'
const newsList = reactive([
  {id: 'asfdtrfay01', title: '很好的抗癌食物', content: '西兰花'},
  {id: 'asfdtrfay02', title: '如何一夜暴富', content: '学IT'},
  {id: 'asfdtrfay03', title: '震惊, 万万没想到', content: '明天是周一'},
  {id: 'asfdtrfay04', title: '好消息!好消息!', content: '快过年了'},
])
</script>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}

.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>